<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="服务包ID" label-width="80px">
              <el-input ref="vipHeight" v-model="serviceId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="服务名称" label-width="100px">
              <el-input v-model="name" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="服务来源" label-width="100px">
              <el-select v-model="source" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of sourceArr" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <el-button
              v-powerbtn="{power: 'business-service-search'}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="loadList"
            >查询</el-button>
          </el-col>
        </el-row>

        <el-row type="flex" justify="start">
          <el-col :span="10">
            <el-form-item label="创建时间" label-width="80px">
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                class="timeLength"
                @change="checkStartTime"
              />
              <span style="display: inline-block;width:16px;">至</span>
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions2"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="服务类型" label-width="100px">
              <el-select v-model="serviceType" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option v-for="item of serviceTypeArr" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
          <el-col :span="2" class="flexd">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </el-col>

        </el-row>
      </el-form>
    </div>

    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="服务ID">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.serviceId" :content="scope.row.serviceId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.serviceId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="服务名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.createTime" :content="scope.row.createTime" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.createTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.description" :content="scope.row.description" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.description }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="服务类型">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.type" :content="scope.row.type" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.type }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="服务来源">
          <template slot-scope="scope">
            {{ scope.row.source }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button
              v-show="false"
              type="primary"
              round
              style="margin-left:0"
              size="mini"
              icon="el-icon-share"
              @click="connect(scope.row.serviceId)"
            >已关联产品</el-button>
            <el-button
              v-powerbtn="{power: 'business-product-find'}"
              type="primary"
              plain
              round
              style="margin-left:0"
              size="mini"
              @click="watch(scope.row.id)"
            >查看</el-button>
            <el-button
              type="primary"
              size="mini"
              round
              plain
              @click="packageMethod(scope.row.serviceId, scope.row.name)"
            >
              多集打包策略配置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <watch-info :watch-dialog="watchDialog" :watch-id="watchId" @closeWatch="closeWatch" />
    <watch-connect :edit-dialog="editDialog" :watch-id="watchId" @closeConect="closeConect" />
    <package-plan :package-id="serviceIdz" :package-name="serviceName" :package-dialog="packageValue" @closePackage="closePackage" />
  </div>
</template>

<script>
import { getList, getSelect } from '@/api/services.js'
import powerbtn from '@/directive/powerbtn/index.js'
import watchInfo from './components/watchInfo.vue'
import watchConnect from './components/hasConnect.vue'
import packagePlan from './components/package.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    watchInfo: watchInfo,
    watchConnect: watchConnect,
    packagePlan: packagePlan
  },
  data() {
    return {
      tiemLen: '',
      serviceIdz: '',
      serviceName: '',
      packageValue: false,
      list: [], // 请求列表
      serviceId: '',
      flag: true,
      serviceType: '',
      name: '', // 服务名称
      source: '', // 服务来源
      pay: [], // 支付渠道下拉
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: '0', // 策略id
      count: 0, // 总数量
      paySelect: [],
      serviceTypeArr: [],
      sourceArr: [],
      arr: [], // 多选
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      var len = this.$refs.vipHeight.$el.offsetWidth / 2 - 10
      console.log(len)
      this.tiemLen = {
        'width': len + 'px'
      }
    })
    this.loadList()
    this.getSelectAll()
  },
  methods: {
    closePackage() {
      this.packageValue = false
    },
    packageMethod(id, name) {
      this.packageValue = true
      this.serviceIdz = id
      this.serviceName = name
    },
    // 请求列表
    loadList() {
      const request = {
        serviceId: this.serviceId,
        name: this.name,
        type: this.serviceType,
        source: this.source,
        startTime: this.startDate,
        endTime: this.endDate,
        pageid: 1, // 当前页数
        pagecount: 20 // 每页可显示条数
      }
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.count) // 总数量
          // if (this.list.length > 0) {
          //   this.pageid = parseInt(res.data.list[0].pageNum) // 当前页数
          // }
          this.status = true
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    connect(id) {
      this.editDialog = true
      this.watchId = id
    },

    closeConect() {
      this.editDialog = false
    },
    // 请求支付渠道下拉
    getSelectAll() {
      // 服务类型
      var data = {
        functionType: 'serviceType'
      }

      // 服务来源
      var data1 = {
        functionType: 'serviceSource'
      }

      getSelect(data).then(res => {
        if (res.resultCode === '0000') {
          this.serviceTypeArr = res.data.list
        }
      })
      getSelect(data1).then(res => {
        this.sourceArr = res.data.list
      })
    },

    reset() {
      this.serviceId = ''
      this.name = ''
      this.source = ''
      this.serviceType = ''
      this.startDate = ''
      this.endDate = ''
    },

    // 多选
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.arr = val.map(item => {
          return { oNumber: item.oNumber }
        })
      }
    },
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        serviceId: this.serviceId,
        name: this.name,
        type: this.serviceType,
        source: this.source,
        startTime: this.startDate,
        endTime: this.endDate,
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getList(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        serviceId: this.serviceId,
        name: this.name,
        type: this.serviceType,
        source: this.source,
        startTime: this.startDate,
        endTime: this.endDate,
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getList(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },

    // 查看
    watch(id) {
      this.watchDialog = true
      this.watchId = id
    },

    edit(id) {
      this.editDialog = true
      this.watchId = parseInt(id)
      this.paySelect = this.pay
    },

    // 关闭查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.addDialog = true
      this.paySelect = this.pay
    },

    // 关闭新增回调
    closeAdd() {
      this.addDialog = false
    },

    closeEdit() {
      this.editDialog = false
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
/* .timeLength{
  width: 37.5% !important;
} */
</style>
